<template>
  <div>
    <article id="tipsIndex" class="pdgSideSp">
      <h1>南昌Metro地铁乘坐小贴士</h1>
      <section id="tips_index">
        <div v-for="(item, index) in tips" :key="index">
          <h2 class="h2Center">{{ item.name }}</h2>
          <div :class="item.class">
            <div v-for="(infoItem, j) in item.info" :key="j" class="block">
              <a href="#" target="_blank">
                <div class="pic">
                  <img :src="infoItem.img" width="206" height="94" alt />
                </div>
                <div class="txt">
                  <h3>{{ infoItem.title }}</h3>
                  <p>{{ infoItem.para }}</p>
                </div>
                <div class="btnView showSp">查看更多</div>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="relatedLinksCard tipsRelated">
        <h2 class="h2Center">相关链接</h2>
        <div class="wrapper">
          <a href="#" target="_blank" v-for="(item, index) in links" :key="index">
            <div class="block">
              <h3>{{ item.title }}</h3>
              <div class="pic">
                <img :src="item.img" alt width="62" height="60" />
              </div>
            </div>
          </a>
        </div>
      </section>
      <section class="bnrCol4">
        <div class="block">
          <a href="#" target="_blank">
            <img src="../../../public/img/tips/bnr_01.png" alt />
          </a>
        </div>
      </section>
    </article>
    <div class="breakCrumb">
      <ul>
        <li>
          <a href="../../../public/index.html">首页</a>
        </li>
        <li>南昌地铁乘坐小贴士</li>
      </ul>
    </div>
    <div id="pageTop">
      <a href="#tipsIndex">
        <img src="../../../public/img/tips/icon_pagetop.png" alt="返回首页" width="50" height="50" />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tips: [
        {
          name: "机场交通/南昌地铁乘坐方法",
          class: "linkIndexCol2",
          info: [
            {
              img: "img/tips/img_access_01.jpg",
              title: "从机场出发的交通路线",
              para: "介绍从昌北机场到南昌地铁的交通信息。"
            },
            {
              img: "img/tips/img_access_02.jpg",
              title: "为什么选择南昌地铁",
              para: "为您介绍为什么南昌地铁是环游南昌最便捷的出行方式。"
            },
            {
              img: "img/tips/img_access_03.jpg",
              title: "搭乘地铁前",
              para: "为您介绍如何找到正确的车站入口及顺利搭乘地铁的方法。"
            },
            {
              img: "img/tips/img_access_04.jpg",
              title: "下车后的出站方法",
              para: "介绍南昌地铁的乘车资讯，让您快速了解搭乘方法。"
            }
          ]
        },
        {
          name: "帮助与指南",
          class: "linkIndexCol2 support",
          info: [
            {
              img: "img/tips/img_support_01.jpg",
              title: "南昌地铁指南",
              para:
                "南昌地铁为了方便广大游客，发行了中文（繁体字和简体字）、\
                                英文、韩文和泰文的指南手册。"
            },
            {
              img: "img/tips/img_support_02.jpg",
              title: "南昌地铁旅客问讯处",
              para: "我们将提供有关南昌地铁旅客问讯处及服务经理的有用信息。"
            },
            {
              img: "img/tips/img_support_03.jpg",
              title: "欢迎板",
              para: "介绍南昌地铁的欢迎板，帮助游客前往各个景点。"
            },
            {
              img: "img/tips/img_support_04.jpg",
              title: "免费无限上网（Free Wi-Fi）",
              para:
                "所有南昌地铁均可免费使用无线上网，让你在地下也可以无线上网。"
            },
            {
              img: "img/tips/img_support_05.jpg",
              title: "下载应用程序",
              para: "提供免费应用，帮助游客搜寻南昌地铁系统的换乘咨询。"
            }
          ]
        },
        {
          name: "礼貌与安全",
          class: "linkIndexCol2 notes_index",
          info: [
            {
              img: "img/tips/img_notes_01.jpg",
              title: "乘车须知",
              para: "介绍乘坐南昌地铁的礼仪及文化。"
            },
            {
              img: "img/tips/img_notes_02.jpg",
              title: "袖珍安全指南",
              para:
                "袖珍安全指南是一本手册，介绍了用于乘客安全的各项措施、\
                                应急程序以及发生紧急情况时要考虑的重要事项。"
            },
            {
              img: "img/tips/img_notes_03.jpg",
              title: "就是不要卷入犯罪纠纷里",
              para: "免于'犯罪·纠纷'的保身艺术"
            }
          ]
        }
      ],
      links: [
        {
          title: "下载应用程序",
          img: "img/tips/img_01.png"
        },
        {
          title: "运行路线图",
          img: "img/tips/img_02.png"
        },
        {
          title: "Nanchang Subway Ticket",
          img: "img/tips/ticket_otoku05.png"
        },
        {
          title: "乘坐南昌地铁游览南昌",
          img: "img/tips/img_09.png"
        }
      ]
    };
  }
};
</script>

<style scoped>
@import "../../assets/css/common.css";

* {
  box-sizing: border-box;
}


article {
  max-width: 1280px;
  padding: 0 68px 120px;
  margin: 0 auto;
  margin-top: 150px;
}

h1 {
  position: relative;
  font-size: 2.4rem;
  color: #00467e;
  text-align: center;
  word-break: break-all;
  padding-bottom: 20px;
  margin-bottom: 82px;
}

h1::before,
h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 49px;
  height: 4px;
  background-color: #00a3d9;
  display: block;
  margin-left: -49px;
}

h1::after {
  background-color: #00467e;
  margin-left: 1px;
}

section {
  display: block;
}

.h2Center {
  font-size: 1.9rem;
  color: #00467e;
  text-align: center;
  margin: 20px 0 48px;
}

.linkIndexCol2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1146px;
  padding-bottom: 8px;
  margin: 0 auto;
}

.linkIndexCol2 .block {
  position: relative;
  width: 48.7%;
  padding: 34px 0 0;
  margin-bottom: 56px;
  overflow: hidden;
}

.linkIndexCol2 .block::before,
.linkIndexCol2 .block::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 99px;
  height: 4px;
  background-color: #00a3d9;
}
.linkIndexCol2 .block::after {
  width: 100%;
  left: 100px;
  background-color: #c5d7dd;
}

.linkIndexCol2 .block a {
  position: relative;
  color: #000;
  text-decoration: none;
}

#tips_index .linkIndexCol2 .block:first-child .pic {
  padding: 5px;
}

.linkIndexCol2 .pic {
  float: left;
  position: relative;
  display: flex;
  justify-content: center;
  align-self: center;
  width: 38.6%;
  height: 144px;
  background-color: #edf6f9;
  /* margin-bottom: 20px; */
}

.linkIndexCol2 .block .pic::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

#tips_index .linkIndexCol2 .pic img {
  width: 100%;
  height: auto;
  margin-top: 13px;
  margin-bottom: 13px;
}

#tips_index .linkIndexCol2 .pic:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.linkIndexCol2 .txt {
  float: right;
  width: 61.4%;
  padding-left: 23px;
}

.linkIndexCol2 .block h3 {
  font-size: 1.4rem;
  color: #00467e;
  background: url("/img/icon_arrow_blue.png") no-repeat left 10px;
  background-size: 7px 12px;
  padding: 0 0 0 15px;
  margin-bottom: 15px;
  word-break: keep-all;
}

.linkIndexCol2 .block p {
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0 13px 0 15px;
}

.linkIndexCol2 .block h3:hover {
  text-decoration: underline;
}

.linkIndexCol2 .block a::after {
  content: "";
  clear: both;
}

.relatedLinksCard .wrapper {
  display: flex;
  justify-content: space-between;
  max-width: 1146px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.showSp {
  display: none;
}

.relatedLinksCard a {
  position: relative;
  display: flex;
  align-self: center;
  width: 23.1%;
  min-height: 100px;
  text-decoration: none;
  color: #00467e;
  padding-left: 18px;
  border: 1px solid #ccc;
}

.relatedLinksCard .block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.relatedLinksCard a:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}

.relatedLinksCard h3 {
  font-size: 1rem;
  line-height: 1.25;
  background: url("/img/icon_arrow_blue.png") no-repeat left 3px;
  background-size: 7px auto;
  padding-left: 16px;
}

.relatedLinksCard a .pic {
  width: 23.4%;
  margin-right: 4.9%;
}

.relatedLinksCard .pic {
  min-width: 30px;
}

.relatedLinksCard .pic img {
  width: 100%;
  height: auto;
}

.bnrCol4 {
  margin-top: 50px;
}

.bnrCol4 a {
  position: relative;
  display: flex;
  align-items: center;
  width: 23.1%;
  text-decoration: none;
}

.bnrCol4 a img {
  width: 100%;
}

.breakCrumb {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto 22px;
}

.breakCrumb ul {
  display: flex;
  list-style: none;
}

.breakCrumb li {
  font-size: 0.75rem;
  color: #000;
}

.breakCrumb li a {
  color: #00467e;
  text-decoration: none;
}

.breakCrumb li a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  background: url("/img/tips/icon_bread_arrow.png") no-repeat;
  background-size: 6px auto;
  margin: 0 11px;
}

#pageTop {
  position: fixed;
  bottom: 30px;
  right: 27px;
  z-index: 2;
  transition: all 0.2s linear;
}

/* 移动端 */
@media screen and (max-width: 700px) {
  article {
    padding: 0 15px;
  }
  .linkIndexCol2 .block {
    width: 100%;
  }

  .linkIndexCol2 .block .pic {
    width: 100%;
    height: 300px;
  }

  .linkIndexCol2 .block .txt {
    float: none;
    padding-left: 0px;
    margin-bottom: 20px;
  }

  .linkIndexCol2 .block .txt h3 {
    color: #000;
    padding-left: 0;
    font-size: 1.2rem;
  }

  .linkIndexCol2 .block .txt p {
    padding-left: 0;
    width: 600px;
  }

  .linkIndexCol2 .block .pic img {
    height: auto;
  }

  .linkIndexCol2 .showSp {
    display: block;
    width: 100%;
    background-color: #00467e;
  }
  .linkIndexCol2 .btnView {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    font-size: 1.2rem;
    background-color: #00467e;
    border-radius: 3px;
    color: #fff;
  }

  .linkIndexCol2 .btnView::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 12px;
    background: url("/img/tips/icon_view_arrow.png") no-repeat;
    background-size: 6px auto;
    margin-right: 6px;
  }
  
  .relatedLinksCard .wrapper{
    display: flex;
    flex-wrap: wrap;
      width: 100%;
      margin: 0 auto;
  }
  .relatedLinksCard a {
    display: block;
    width: 48%;
  }

  .relatedLinksCard a:nth-child(2n + 1) {
    margin: 8px;
  }
  .relatedLinksCard a .pic {
    margin-top: 15px;
  }

  .breakCrumb {
    margin: 20px auto 22px;
  }
}
</style>